import { PlusCircleFilled, SearchOutlined } from '@ant-design/icons';
import { PageContainer, ProLayout } from '@ant-design/pro-components';
import { Input, Space } from 'antd';
import { useState } from 'react';
import complexMenu from './complexMenu.jsx';
import { Outlet } from "react-router-dom";

const filterByMenuData = (
  data,
  keyWord,
) =>
  data
    .map((item) => {
      if (item.name?.includes(keyWord)) {
        return { ...item };
      }
      const children = filterByMenuData(item.children || [], keyWord);
      if (children.length > 0) {
        return { ...item, children };
      }
      return undefined;
    })
    .filter((item) => item);

const loopMenuItem = (menus) => {
  console.log("menus::::::::", menus);
  const menuItem = menus.map(({ icon, routes, ...item }) => ({
    icon,
    ...item,
    children: routes && loopMenuItem(routes),
  }));
  console.log("menuItem::::::::", menuItem);
  return menuItem;
}

const SearchMenu = () => {
  const [keyWord, setKeyWord] = useState('');
  return (
    <div
      style={{
        height: '100vh',
      }}
    >
      <ProLayout
        logo={new URL("vite.svg", new URL(import.meta.url).origin).href}
        title={"张政倾的博客"}
        location={{
          pathname: '/home/overview',
        }}
        menu={{
          hideMenuWhenCollapsed: false,
        }}
        menuExtraRender={({ collapsed }) =>
          !collapsed && (
            <Space
              style={{
                marginBlockStart: 16,
              }}
              align="center"
            >
              <Input
                style={{
                  borderRadius: 4,
                  backgroundColor: 'rgba(0,0,0,0.03)',
                }}
                prefix={
                  <SearchOutlined
                    style={{
                      color: 'rgba(0, 0, 0, 0.15)',
                    }}
                  />
                }
                placeholder="搜索方案"
                variant="borderless"
                onPressEnter={(e) => {
                  setKeyWord((e.target).value);
                }}
              />
              <PlusCircleFilled
                style={{
                  color: 'var(--ant-primary-color)',
                  fontSize: 24,
                }}
              />
            </Space>
          )
        }
        menuDataRender={() => loopMenuItem(complexMenu)}
        postMenuData={(menus) => filterByMenuData(menus || [], keyWord)}
        route={{
          routes: complexMenu,
        }}
        menuItemRender={(item, dom) => (
          <div
            onClick={() => {
              console.log("item, dom:: ", item, dom);
              console.log("item.path:: ", item.path);

              location.pathname = item.path || "/";

              console.log("location.pathname: ", location.pathname);
              console.log("location.hash: ", location.hash);
            }}
          >
            {dom}
          </div>
        )}
      >
        <PageContainer content="欢迎使用">
          <div>Hello World</div>
          <Outlet />
        </PageContainer>
      </ProLayout>
    </div>
  );
};

export default SearchMenu;
